<template>
  <div>
    <!-- 位置显示 -->
    <div class='position'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/person/update' }">个人资料</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple" style="margin:10px;">
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="用户名">{{userinfo.account}}</el-descriptions-item>
            <el-descriptions-item label="账号申请时间">{{userinfo.createTime}}</el-descriptions-item>
            <el-descriptions-item label="最后修改时间" :span="2">{{userinfo.updateTime}}</el-descriptions-item>
            <el-descriptions-item label="使用状态">
              <el-tag type="success" v-if="userinfo.status">正常</el-tag>
              <el-tag type="info" v-else>停用</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="修改次数">{{userinfo.version}}</el-descriptions-item>
            <el-descriptions-item label="身份">
              <el-tag type="danger">{{roleName}}</el-tag>
              </el-descriptions-item>
            <el-descriptions-item label="真实姓名" v-if="this.role!=1">{{userinfo.name}}</el-descriptions-item>
            <el-descriptions-item label="学生综合评分" v-if="this.role==2">{{score}}</el-descriptions-item>
          </el-descriptions>
          
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right;" size="mini" type="success">操作按钮</el-button>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right;" size="mini" type="primary">操作按钮</el-button>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState,mapGetters } from "vuex";
import   {score} from '@/api/api'
export default {
  data() {
    return {
      user: {},
      score:0,
    }
  },
  computed: {
    ...mapState(["userinfo", 'role']),
    ...mapGetters(['roleName'])
  },
 methods:{
   getScore(){
     if(this.role !=2) return 
     score({mid:this.userinfo.id}).then(res =>{
       console.log(res);
         this.score =  res.data
     })
   }
 }
}
</script>

<style scoped>
.position {
  padding: 10px;
  margin-bottom: 10px;
}
.box-card {
  margin: 10px;
}
</style>